<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="80px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader
                                    :options="state.menuList"
                                    :props="{ checkStrictly: true, value: 'menuId', label: 'title' , emitPath:false}"
                                    placeholder="请选择上级菜单"
                                    clearable
                                    class="w100"
                                    v-model="state.ruleForm.parentId"
                            >
                                <template #default="{ node, data }">
                                    <SvgIcon :name="data.meta.icon"/>
                                    <span class="ml10">{{ $t(data.meta.title) }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="菜单类型" prop="menuType">
                            <el-radio-group v-model="state.ruleForm.menuType">
                                <el-radio label="0">菜单</el-radio>
                                <el-radio label="1">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单名称" prop="meta.title">
                            <el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <template v-if="state.ruleForm.menuType === '0'">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="路由名称" prop="name">
                                <el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="路由路径" prop="path">
                                <el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="重定向" prop="redirect">
                                <el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="菜单图标" prop="meta.icon">
                                <IconSelector placeholder="请输入菜单图标" v-model="state.ruleForm.meta.icon"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="组件路径" prop="component">
                                <el-input v-model="state.ruleForm.component" placeholder="组件路径"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="链接地址" prop="meta.isLink">
                                <el-input
                                        v-model="state.ruleForm.meta.isLink"
                                        placeholder="外链/内嵌时链接地址（http:xxx.com）"
                                        clearable
                                        :disabled="!state.ruleForm.isLink"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="权限标识" prop="meta.permissions">
                                <el-input v-model="state.ruleForm.meta.permissions" placeholder="请输入权限标识*.*.*"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </template>
                    <template v-if="state.ruleForm.menuType === '1'">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="权限标识" prop="meta.permissions">
                                <el-input v-model="state.ruleForm.meta.permissions" placeholder="请输入权限标识"
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单排序" prop="sortOrder">
                            <el-input-number v-model="state.ruleForm.sortOrder" controls-position="right"
                                             placeholder="请输入排序" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <template v-if="state.ruleForm.menuType === '0'">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否隐藏" prop="meta.isHide">
                                <el-radio-group v-model="state.ruleForm.meta.isHide">
                                    <el-radio :label="true">隐藏</el-radio>
                                    <el-radio :label="false">不隐藏</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="页面缓存" prop="meta.isKeepAlive">
                                <el-radio-group v-model="state.ruleForm.meta.isKeepAlive">
                                    <el-radio :label="true">缓存</el-radio>
                                    <el-radio :label="false">不缓存</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否固定" prop="meta.isAffix">
                                <el-radio-group v-model="state.ruleForm.meta.isAffix">
                                    <el-radio :label="true">固定</el-radio>
                                    <el-radio :label="false">不固定</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否外链" prop="isLink">
                                <el-radio-group v-model="state.ruleForm.isLink">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="是否内嵌" prop="meta.isIframe">
                                <el-radio-group v-model="state.ruleForm.meta.isIframe">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="systemMenuDialog">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {storeToRefs} from 'pinia';
import {useRoutesList} from '/@/stores/routesList';
import {i18n} from '/@/i18n';
import MenuApi from "/@/api/system/MenuApi";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 引入组件
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));

// 定义变量内容
const menuDialogFormRef = ref();
const stores = useRoutesList();
const {routesList} = storeToRefs(stores);
const state = reactive({
    // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
    ruleForm: {
        menuId: '',
        parentId: '',//上级菜单
        menuType: '0', // 菜单类型
        name: '', // 路由名称
        component: '', // 组件路径
        isLink: false, // 是否外链
        sortOrder: 0, // 菜单排序
        path: '', // 路由路径
        redirect: '', // 路由重定向，有子集 children 时
        meta: {
            title: '', // 菜单名称
            icon: '', // 菜单图标
            isHide: false, // 是否隐藏
            isKeepAlive: true, // 是否缓存
            isAffix: false, // 是否固定
            isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
            isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
            permissions: ''//权限标识
        },
    },
    menuList: [] as RouteItems, // 上级菜单数据
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});


// 打开弹窗
const openDialog = (type: string, menuId?: string) => {
    menuDialogFormRef.value?.resetFields()
    if (type==='add'){
        state.dialog.title = '新增菜单';
        state.dialog.submitTxt = '新 增';
        if (menuDialogFormRef.value){
            menuDialogFormRef.value.resetFields();
        }
    }
    if (type==='addItem'){
        state.dialog.title = '新增子级';
        state.dialog.submitTxt = '新 增';
        if (menuDialogFormRef.value){
            menuDialogFormRef.value.resetFields();
        }
        if (menuId != null) {
            state.ruleForm.parentId = menuId
        }
    }
    if (type === 'edit' && menuId !== '') {
        // 模拟数据，实际请走接口
        state.dialog.title = '修改菜单';
        state.dialog.submitTxt = '修 改';
        if (menuId) {
            getInfo(menuId)
        }
    }
    state.dialog.type = type;
    state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = async () => {
    if (state.ruleForm.parentId === '') {
        state.ruleForm.parentId = '0'
    }
    if (state.dialog.type === 'edit') {
        await MenuApi.update(state.ruleForm)
    } else {
        await MenuApi.insert(state.ruleForm)
    }
    closeDialog(); // 关闭弹窗
    emit('refresh');
};
const getInfo = (id: string) => {
    MenuApi.view(id).then(res => {
        console.log(res.data)
        Object.assign(state.ruleForm, res.data)
    })
}
const getMenuList = () => {
    MenuApi.list().then(res => {
        Object.assign(state.menuList, setTitle(res.data || []))
    })
}
//title国际化支持
const setTitle = (data: []) => {
    const arr = []
    data.map((val: RouteItem) => {
        val['title'] = i18n.global.t(val.meta?.title as string);
        arr.push({...val});
        if (val.children) setTitle(val.children);
    });
    return arr;
}
const rules=ref({

})
onMounted(() => {
    getMenuList()
})
// 暴露变量
defineExpose({
    openDialog,
});
</script>
